<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link rel="stylesheet" href="./framework/font-awesome-4.7.0/css/font-awesome.min.css">
		<link rel="stylesheet" href="./framework/reset.css">
		<link rel="stylesheet" href="./framework/common.css">
		<title>东软环保公众监督系统-公众监督员端-选择网格</title>
		<script src="js/base.js"></script>
	</head>
	<body>
		<!-- 总容器 -->
		<div class="wrapper">
			<div class="header-box">
				<header>
					<i class="fa fa-angle-left" onclick="history.go(-1)"></i>
					<p>选择网格</p>
					<i class="fa fa-bars" onclick="location.href='feedbackList.html'"></i>
				</header>
				<div class="top-ban"></div>
				<img src="./img/header.png">
			</div>

			<table class="table-form">
				<tr>
					<td>所在省</td>
					<td>
						<select id="selectProvince" onchange="onProvinceChange()">
							<!-- 							<option value="1">辽宁省</option>
							<option value="2">北京市</option>
							<option value="3">河北省</option> -->
						</select>
					</td>
				</tr>
				<tr>
					<td>所在市</td>
					<td>
						<select id="selectCity">
							<!-- 							<option value="1">沈阳市</option>
							<option value="2">北京市</option>
							<option value="3">石家庄市</option> -->
						</select>
					</td>
				</tr>
				<tr>
					<td>地址</td>
					<td><input id="address" type="text" placeholder="具体地址"></td>
				</tr>
				<tr>
					<td colspan="2">
						<div class="btn" onclick="selectAQI()">下一步</div>
					</td>
				</tr>
			</table>
		</div>
	</body>
</html>
<script>
	function provinceAll() {
		let url = "http://localhost:8080/provinceCity/proviceAll";
		rest(url, "get", null, function(r) {
			if (r.ok) {
				let provinceArr = r.data.provinces;
				console.log(provinceArr);
				let innerHTML = "";
				for (let i = 0; i < provinceArr.length; i++) {
					innerHTML = innerHTML + "\t<option value=\"" + provinceArr[i].provinceId + "\">" +
						provinceArr[i].provinceName + "</option>"
				}
				document.getElementById("selectProvince").innerHTML = innerHTML;
				let provinceId = provinceArr[0].provinceId;
				onProvinceChange(provinceId)
			}
		})
	}


	function onProvinceChange() {
		let provinceId = document.getElementById("selectProvince").value;
		AllCity(provinceId);
	}

	function AllCity(provinceId) {
		let url = "http://localhost:8080/provinceCity/cityAll?provinceId=" + provinceId;
		rest(url, "get", null, function(r) {
			if (r.ok) {
				let cityArr = r.data.cities;
				let innerHTML = "";
				for (let i = 0; i < cityArr.length; i++) {
					innerHTML = innerHTML + "\t<option value=\"" + cityArr[i].cityId + "\">" +
						cityArr[i].cityName + "</option>"
				}
				document.getElementById("selectCity").innerHTML = innerHTML;
			}
		})
	}

	function selectAQI() {
		let provinceId = document.getElementById("selectProvince").value;
		let cityId = document.getElementById("selectProvince").value;
		let address = document.getElementById("address").value;
		localStorage.setItem("provinceId", provinceId);
		localStorage.setItem("cityId", cityId);
		localStorage.setItem("address", address);
		location.href = 'selectAqi.html'
	}
	provinceAll();
</script>